<template>
	<div id="resource">	
		<Modal
	        v-model="modal"
	        :title="modalTitle"
	        width="650px"
	        class="resourceModalStyle"
	        @on-ok="modalOk">
	        <div class="content">				
				<div>
					<p class="tag"><span class="star">*</span>资源名称:</p>
					<Input v-model="resour.name"/>
				</div>
				<div>
					<p class="tag"><span class="star">*</span>资源类型:</p>
					<Select v-model="resour.type">
						<Option value="MENU">菜单</Option>
						<Option value="BUTTON">按钮</Option>
					</Select>
				</div>
				<div>
					<p class="tag"><span class="star">*</span>资源路径:</p>
					<Input v-model="resour.path"/>
				</div>				
				<div>
					<p class="tag">状态:</p>
					<RadioGroup v-model="resour.status">
				        <Radio label="ENABLE">有效</Radio>
				        <Radio label="DISABLE">无效</Radio>
				    </RadioGroup>
				</div>
				<div>
					<p class="tag">上级资源:</p>
					<AutoComplete	
						v-model="parentName"
						clearable
						@on-search="parentSearch"
						@on-select="chooseParentOption">
						<Option v-for="item in parentResource" :value="item.name" :key="item.name">{{ item.name }}</Option>
					</AutoComplete>				
				</div>	
				<div>
					<p class="tag">备注:</p>
					<Input v-model="resour.remark" type="textarea"/>
				</div>	
	        </div>
	    </Modal>
	   
		<div class="top">
			<div></div>
			<div>
				<Button class="add" @click="add">添加</Button>
			</div>
		</div>
		<div class="main">
			<table>
				<tr>
					<th style='width:100px;'>编号</th>
					<th>资源名称</th>
					<th style='width:200px;'>资源路径</th>
					<th style='width:200px;'>资源类型</th>
					<th style='width:200px;'>状态</th>
					<th style='width:200px;'>操作</th>
				</tr>
				<tbody v-for="item in resource">
					<tr>
						<td>{{item.id}}</td>
						<td class="resourceName">
							<span @click="open(item)" v-if="!item.show&&item.type=='MENU'" class="iconfont open">&#xe769;</span>
							<span @click="close(item)" v-if="item.show&&item.type=='MENU'" class="iconfont close">&#xe652;</span>
							<span v-if="item.type=='BUTTON'" class="iconfont file">&#xe60d;</span>
							<span v-if="item.type=='MENU'" class="iconfont openDir">&#xe606;</span>
							<span>{{item.name}}</span>
						</td>
						<td>{{item.path}}</td>
						<td>{{item.type|resourceType}}</td>
						<td>{{item.status|userStatus}}</td>
						<td class="handle">
							<span class='iconfont' @click="edit(item)" title="编辑">&#xe601;</span>
							<span class='iconfont' @click="dele(item.id)" title="删除">&#xe62e;</span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</template>

<script>
import main from "./main";
export default {
  ...main
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "./style.scss";
</style>
